<template>
  <div class="app-container">
    <div>
      <el-button class="fanhui" size="mini" @click="goBack" icon="el-icon-arrow-left" type="primary">
        返回
      </el-button>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="A表 监测信息表" name="first">
          <aForm ref="aFormRef" />
        </el-tab-pane>
        <el-tab-pane label="B表 药品不良反应/事件报告表" name="second">
          <bForm ref="bFormRef" />
        </el-tab-pane>
        <el-tab-pane label="监测表管理" name="third">
          <cForm ref="cFormRef" @switch-tab="switchToFirstTab" />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import aForm from "./components/aForm.vue";
import bForm from "./components/bForm.vue";
import cForm from "./components/cForm.vue";
export default {
  components: {
    aForm,
    bForm,
    cForm,
  },
  data() {
    return {
      activeName: "first",
      isEditA: false,
      isEditB: false,
      flagData: {},
    };
  },
  mounted() {
    this.$nextTick(() => {
      this.initActiveTab();
      switch (this.activeName) {
        case "first":
          this.$refs.aFormRef.getDataInfo(); // 调用 A 表的 getDataInfo 方法
          break;
        case "second":
          this.$refs.bFormRef.getList(); // 调用 A 表的 getDataInfo 方法
          break;
        case "third":
          this.$refs.cFormRef.getList(); // 调用 C 表的 getList 方法
          break;
        default:
          console.warn("Unknown tab:", tab.name);
      }
    });
  },
  methods: {
    initActiveTab() {
      const bId = this.$route.query.bId;
      if (bId) {
        this.activeName = 'second';
        this.$nextTick(() => {
          // this.$refs.bFormRef.getList();
        });
      }
    },
    goBack() {
      this.$router.go(-1);
    },
    switchToFirstTab(payload) {
      this.flagData = payload;
      this.isEditA = false,
        this.isEditB = false,
        // 切换到对应的选项卡，并获取传递的id和medicalRecordNo参数
        this.activeName = payload.name;
      const { id, medicalRecordNo, isLook } = payload;
      if (payload.name == "first") {
        this.isEditA = true;
        this.$refs.aFormRef.getDataInfo(id, medicalRecordNo, isLook); // 调用 A 表的 getDataInfo 方法
      } else if (payload.name == "second") {
        this.isEditB = true;
        this.$refs.bFormRef.getList(id, medicalRecordNo, isLook); // 调用 B 表的 getList 方法
      }
    },
    handleClick(tab) {
      const { id, medicalRecordNo } = this.flagData;
      // 根据 tab.name 来判断点击了哪个标签页，然后调用对应组件的 getList 方法
      switch (tab.name) {
        case "first":
          if (this.isEditA) {
            this.$refs.aFormRef.getDataInfo(id, medicalRecordNo); // 调用 A 表的 getDataInfo 方法
            break;
          } else {
            console.log(this.$refs.aFormRef.form.medicalRecordNo);
            console.log(this.$refs.bFormRef.form.medicalRecordNo);
            this.$refs.aFormRef.getDataInfo(null, this.$refs.aFormRef.form.medicalRecordNo || this.$refs.bFormRef.form.medicalRecordNo); // 调用 A 表的 getDataInfo 方法
            break;
          }
        case "second":
          if (this.isEditB) {
            this.$refs.bFormRef.getList(id, medicalRecordNo); // 调用 A 表的 getDataInfo 方法
            break;
          } else {
            console.log(this.$refs.aFormRef.form.medicalRecordNo);
            console.log(this.$refs.bFormRef.form.medicalRecordNo);
            this.$refs.bFormRef.getList(null, this.$refs.aFormRef.form.medicalRecordNo || this.$refs.bFormRef.form.medicalRecordNo); // 调用 A 表的 getDataInfo 方法
            break;
          }
        case "third":
          this.$refs.cFormRef.getList(id, medicalRecordNo || this.$refs.aFormRef.form.medicalRecordNo || this.$refs.bFormRef.form.medicalRecordNo); // 调用 C 表的 getList 方法
          break;
        default:
          console.warn("Unknown tab:", tab.name);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-input.is-disabled .el-input__inner {
  color: #000;
  /* 这里设置你想要的颜色 */
}

/* 修改禁用状态下的el-radio选中颜色 */
::v-deep .el-radio__input.is-disabled+span.el-radio__label {
  color: #000;
  cursor: not-allowed;
}

/* 修改禁用状态下的el-radio文字颜色 */
::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner {
  border-color: #409eff;
  background: #409eff;
}

::v-deep .el-radio__input.is-disabled.is-checked .el-radio__inner::after {
  background-color: #fff;
}

.fanhui {
  background: #ebf3ff;
  border-radius: 4px 4px 4px 4px;
  color: #35537f;
  border: none;
  margin-bottom: 7px;
}

::v-deep .el-checkbox__label {
  font-size: 15px;
}

::v-deep .el-radio__label {
  font-size: 15px;
}

::v-deep .el-form-item__label {
  font-size: 15px;
}
</style>
